<template>
  <div class="company-container">
    <div class="companyInfo">
      <a-avatar
        style=" width: 100px; height: 100px; margin-top: 35px;margin-left: 50px;"
        shape="square"
        :size="100"
        icon="user"
        :src="company.companyLogo"
      />
      <span style="align-self: center;margin-left: 20px;" class="company-name">
        <span style="font-size: 30px;">{{ company.companyName }}</span>
        <br>
        <span>{{ company.companyType }}</span>
      </span>
      <div class="employee-num">
        <span>
          <span style="font-size: 30px;">在招职位</span>
          <br>
          <span style="font-size: 30px;">{{ job.length }}</span>
        </span>
      </div>
    </div>
    <div>
      <a-tabs default-active-key="1" @change="callback">
        <a-tab-pane key="1" tab="公司简介">
          <mavon-editor
            :value="company.companyDescription"
            default-open="preview"
            :box-shadow="false"
            style="z-index:1;height:50vh; font-size: 18px;"
            :editable="true"
            :subfield="false"
            :toolbars-flag="false"
          />
        </a-tab-pane>
        <a-tab-pane key="2" tab="热招职位" force-render>
          <a-card v-for="item in job" :key="item.jobId" style="width: 80%; margin: 0 auto; height: 100px;" @click="toEmployee(item.jobId)">
            <el-row type="flex" class="row-bg" justify="space-between">
              <el-col :span="20"><div class="grid-content bg-purple">
                <span style="font-size: 20px;margin-right: 5px; color: #42b983;">{{ item.jobName }}</span>
                <br>
                <span style="font-size: 18px; color: chocolate;">{{ item.jobSalary }}</span>
                <el-divider direction="vertical" />
                <span>{{ item.jobAcademic }}</span></div>
              </el-col>
              <el-col :span="4">
                <el-avatar shape="square" :src="company.companyLogo" />
              </el-col>
            </el-row>
          </a-card>
          <div class="block">
            <el-pagination
              layout="prev, pager, next"
              :total="1000"
            />
          </div>
        </a-tab-pane>
      </a-tabs>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CompanyInfo',
  data() {
    return {
      companyId: '',
      job: '',
      context: ' ', // 输入的数据
      company: [],
      toolbars: {
        bold: true, // 粗体
        italic: true, // 斜体
        header: true, // 标题
        underline: true, // 下划线
        mark: true, // 标记
        superscript: true, // 上角标
        quote: true, // 引用
        ol: true, // 有序列表
        link: true, // 链接
        imagelink: true, // 图片链接
        help: true, // 帮助
        code: true, // code
        subfield: true, // 是否需要分栏
        fullscreen: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        /* 1.3.5 */
        undo: true, // 上一步
        trash: true, // 清空
        save: true, // 保存（触发events中的save事件）
        /* 1.4.2 */
        navigation: true // 导航目录
      }
    }
  },
  computed: {
    prop() {
      const data = {
        subfield: false, // 单双栏模式
        defaultOpen: 'preview', // edit： 默认展示编辑区域 ， preview： 默认展示预览区域
        editable: false,
        toolbarsFlag: false,
        scrollStyle: true
      }
      return data
    }
  },
  created() {
    this.companyId = this.$route.params.companyId
    const _this = this
    this.$http.get('/company/findCompanyInfo/' + _this.companyId).then(function(resp) {
      _this.company = resp.data.data
    })
    this.$http.get('/job/findAllJobByCompanyId/' + _this.companyId).then(function(resp) {
      // console.log(resp)
      _this.job = resp.data
    })
  },
  methods: {
    toEmployee: function(e) {
      this.$router.push({ name: 'EmployeeInfo', params: { jobId: e }})
    }
  }
}
</script>

<style scoped lang="scss">
  .company-container{
    .companyInfo{
      display: flex;
      height: 200px;
      width: 1200px;
      background-color: #202329;
      margin: 0 auto;
      .employee-num{
        float: right;
        margin-left: 800px;
        align-self: center;
        right: 300px;
      }
    }
  }
</style>
